<template>
	<view class="search">
		<musichead title="搜索歌曲" :icon='true' color='#000000' :iconblack='true'></musichead>
		<view class="search-input" >
			<text class="iconfont icon-search" ></text>
			<input type="text" :placeholder="searchDefaut" v-model="searchValue" @confirm="handleSearch(searchValue)" @input="handleSuggest">
			<text class="iconfont icon-caozuo-guanbi" v-show="clearFlag" @tap="handleClear"></text>
		</view>
		<view class="container" :style="{'height': 'calc(100vh-220rpx)!important'}">
			<scroll-view scroll-y="true" >
				<block v-if="blockFlag == 1">
					<view class="history">
						<view class="history-head">
							<text>历史记录</text>
							<text class="iconfont icon-lajitong" @tap="handlerClearSuggest"></text>
						</view>
						<view class="history-item" >
							<view v-for="(item,index) in searchHistory" :key="index" @tap="handleSearch(item)">{{ item }}</view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view class="search-hot-item" v-for="(item,index) in searchHot" @tap="handleToWord(item.searchWord)">
							<view class="search-hot-top">{{ index + 1 }}</view>
							<view class="search-hot-word">
								<view>
									{{ item.searchWord }}<image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view>{{ item.content }}</view>
							</view>
							<view class="search-hot-count">{{ item.score }}</view>
						</view>
					</view>		
				</block>
				<block v-else-if="blockFlag == 2 ">
					<view class="result-item" v-for="(item,index) in searchResult" :key="index" @tap="handleToDetail(item.id)">
						<view class="result-right">
							<view>{{ item.name }}</view>
							<view>{{ item.artists[0].name }} - {{ item.album.name }}</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</block>
				<block v-else-if="blockFlag == 3">
					<view class="search-suggest">
						<view class="suggest-title">搜索"{{ searchValue }}"</view>
						<view class="suggest-item" v-for="(item,index) in resultSuggest" :key="index" @tap="handleResult(item.keyword)">
							<text class="iconfont icon-search"></text> {{ item.keyword }}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import "common/iconfont.css"
	import musichead from "../../components/musichead/musichead.vue"
	import { searchHot, searchWord, searchSuggest } from "../../common/api.js"
	export default {
		data() {
			return {
				searchValue: '',
				searchDefaut: '搜索歌曲',
				clearFlag: true,
				searchHot: [],
				searchHistory: [],
				blockFlag: 1,
				searchResult: [],
				resultSuggest : []
			}
		},
		components:{
			musichead
		},
		onLoad() {
			searchHot().then((res)=>{
				this.searchHot = res[1].data.data;
			}), 
			uni.getStorage({
				key: 'Suggest',
				success: (res) => {
					console.log(res);
					this.searchHistory = res.data;
				}
			})
		},
		methods: {
			handleClear(){
				this.searchValue=''
				this.blockFlag = 1
			},
			handleSearch(word){
				this.searchHistory.unshift(word)
				this.searchHistory = [... new Set(this.searchHistory)]
				if (this.searchHistory.length > 10){
					this.searchHistory.length = 10;
				}
				this.handleResult(word)
				this.saveSuggest()
				
			},
			handleToWord(word){
				this.searchValue = word
				this.handleSearch(word)
			},
			handleResult(word){
				searchWord(word).then((res)=>{
					this.searchResult = res[1].data.result.songs;
				})
				this.blockFlag = 2;
				// this.window.scrollTo(0, 0)
			},
			handleToDetail(songid){
				uni.navigateTo({
					url: "../detail/detail?ids=" + songid
				});
			},
			handleSuggest(event){
				// 保存历史记录
				let data = event.detail.value;
				if (data.length > 0){
					this.blockFlag = 3;
					searchSuggest(data).then((res)=>{
						this.resultSuggest = res[1].data.result.allMatch;
					})
				}else{
					this.blockFlag = 1;
				}
				this.saveSuggest()

			},
			// 保存搜索历史记录 保存至 storage中
			saveSuggest(){
				uni.setStorage({
					key: 'Suggest',
					data: this.searchHistory,
					complete: (res) => {
						console.log(res);
					}
				})
			},
			handlerClearSuggest(){
				this.searchHistory = []
				uni.removeStorage({
					key: 'Suggest',
					complete: (res) => {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style scoped>
@import 'search.css'
</style>
